<html>

<head>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/popper.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/static/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="/static/css/custom.css">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/js/bootstrap.min.js"></script>

    <script src="/static/js/auth.js"></script>
    <script src="/static/js/layer.js"></script>
    <title>我的云盘</title>
</head>

<body class="home">
    <div class="home-content">
        <div class="home-title">
            我的云盘
            <button class="btn btn-primary logout" onclick="toLogout()">登出
            </button>
        </div>
        <table class="home-table">
            <tbody>
                <tr style="margin-bottom: 20px;">
                    <td style="width:15%;height: 100%;">
                        <div class="account">
                            <img class="avatar" src="/static/img/tm-jr.jpg"></img><br>
                            <span class="font-title">用户名:</span>
                            <span class="font-content" id="username"></span><br>

                            <span class="font-title">电话:</span>
                            <span class="font-content" id="phone"></span><br>

                            <span class="font-title">邮箱:</span>
                            <span class="font-content" id="email"></span><br>

                            <span class="font-title">注册时间:</span>
                            <span class="font-content" id="regtime"></span><br>
                        </div>
                    </td>
                    <td style="text-align: top;vertical-align: top;">
                        <div style="width:100%;">
                            <span>文件列表</span>
                            <button class="btn btn-primary home-button" onclick="toUploadFile()">上传文件
                            </button>
                            <button class="btn btn-primary home-button" onclick="toMPUploadFile()">分块上传文件
                            </button>
                            <div class="line-horizon"></div>
                        </div>
                        <div style="width:100%;">
                            <table id="filetbl" style="margin-left:3%;width:96%;">
                                <thead style="height:50px;border:1px;">
                                    <tr style="height:50px;border:1px;">
                                        <th>文件hash</th>
                                        <th>文件名</th>
                                        <th>文件大小</th>
                                        <th>上传时间</th>
                                        <th>最近更新</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

<script lang="javascript">
    window.onload = function() {
        var username = document.getElementById('username');
        $.ajax({
            url: "/user/info?" + queryParams(),
            type: "POST",
            error: function(err) {
                alert(JSON.stringify(err));
            },
            success: function(body) {
                var resp = body;
                if (typeof(resp) == 'string') {
                    resp = JSON.parse(body);
                }
                if (resp.code == 10005) {
                    window.location.href = "/static/view/signin.html";
                }
                document.getElementById("username").innerHTML = resp.data.Username;
                document.getElementById("phone").innerHTML = resp.data.Phone;
                document.getElementById("email").innerHTML = resp.data.Email;
                document.getElementById("regtime").innerHTML = resp.data.SignupAt;
                updateFileList();
            }
        });
    }

    function updateFileList() {
        $.ajax({
            url: "/file/query?" + queryParams(),
            type: "POST",
            data: {
                limit: 15
            },
            error: function(err) {
                alert(JSON.stringify(err));
            },
            success: function(body) {
                if (!body) {
                    return;
                }
                var data = body;
                if (!data || data.length <= 0) {
                    return;
                }

                var dlHost = 'http://localhost:8080';
                var dlEntry = localStorage.getItem('downloadEntry');
                if (dlEntry != '') {
                    dlHost = 'http://' + dlEntry;
                }

                var downloadHtml = '<button class="btn btn-info home-button" ' +
                    'onClick = "downloadFile(\'' + dlHost + '/file/downloadurl?filehash={0}&{1}\')">下载</button>';
                var renameFileHtml = '<button class="btn btn-warning home-button" ' +
                    'onClick = "renameFile(\'{0}\',\'{1}\',\'' + serverHost + '/file/' +
                    'update?op=0&filehash={2}&{3}\')">重命名</button>';
                var cdlFileHtml = '<button class="btn btn-info home-button" ' +
                    'onClick = "cdlFile(\'' + dlHost + '/file/download/range?filehash={0}&{1}\')">断点下载</button>';

                var deleteFileHtml = '<button class="btn btn-info home-button" ' +
                        'onclick="delFile(\''+ serverHost+ '/file/delete?filehash={0}&{1}\',\'{2}\')">删除</button>';

                for (var i = 0; i < data.length; i++) {
                    var x = document.getElementById('filetbl').insertRow();
                    var cell = x.insertCell();
                    cell.innerHTML = data[i].FileHash.substr(0, 20) + "...";

                    cell = x.insertCell();
                    cell.innerHTML = data[i].FileName;

                    cell = x.insertCell();
                    cell.innerHTML = data[i].FileSize;

                    cell = x.insertCell();
                    cell.innerHTML = data[i].UploadAt;

                    cell = x.insertCell();
                    cell.innerHTML = data[i].LastUpdated;

                    cell = x.insertCell();
                    cell.innerHTML = downloadHtml.format(data[i].FileHash, queryParams()) +
                                     cdlFileHtml.format(data[i].FileHash, queryParams()) +
                                     renameFileHtml.format(data[i].FileHash, data[i].FileName, data[i].FileHash, queryParams()) +
                                     deleteFileHtml.format(data[i].FileHash, queryParams(), data[i].FileName);
                }
            }
        });
    }

    function toUploadFile() {
        // window.location.href = '/file/upload?' + queryParams();
        window.location.href = "/static/view/upload.html";
    }

    function toMPUploadFile() {
        window.location.href = '/static/view/mpupload.html';
    }

    function toLogout() {
        logout();
    }

    function downloadFile(durl) {

        console.log(durl);

        $.ajax({
            url: durl,
            type: "POST",
            error: function(err) {
                alert(JSON.stringify(err));
            },
            success: function(body) {
                try {
                    alert("文件即将下载自: " + body);
                    var elemIF = document.createElement("iframe");
                    elemIF.src = body;
                    elemIF.style.display = "none";
                    document.body.appendChild(elemIF);
                } catch (e) {
                    alert(e);
                }
            }
        });
    }

    function cdlFile(durl) {
        localStorage.setItem('curDownloadUrl', durl);
        layer.open({
            type: 2,
            title: '断点续传下载演示',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area: ['600px', '300px'],
            content: '/static/view/download.html'
        });
    }

    function renameFile(filehash, filename, renameUrl) {
        var newFileName = prompt("\n当前文件名: {0}\n\n请输入新的文件名: ".format(filename));
        newFileName = newFileName.trim();

        if (newFileName.length <= 0) {
            alert("文件名不能为空");
            return;
        }

        if (newFileName.indexOf(" ") >= 0) {
            alert("文件名不能包含空格");
            return;
        }

        $.ajax({
            url: renameUrl + "&filename=" + newFileName,
            type: "POST",
            error: function(msg) {
                alert(msg);
            },
            success: function(body) {
                alert("文件名修改成功");
                window.location.href = '/static/view/home.html';
            }
        });
    }

    function delFile(url, filename) {
        //弹出一个询问框，有确定和取消按钮
        //利用对话框返回的值 （true 或者 false）
        if (!confirm("你确定删除:"+ filename+" ？")) { // 用于显示一个带有指定消息和确认及取消按钮的对话框。
            alert("取消删除");
            return
        }
        $.ajax({
            url: url ,
            type: "POST",
            error: function(msg) {
                alert("文件删除失败:" + msg);
            },
            success: function(body) {
                alert("文件删除成功");
                window.location.href = '/static/view/home.html';
            }
        });
    }
</script>

</html>